<!--
 * @Author: Yang Zhang
 * @Date: 2021-11-24 23:32:25
 * @LastEditors: Yang Zhang
 * @LastEditTime: 2022-01-06 16:37:18
 * @Description: 
-->
<template>
  <div class="pro_wrap">
    <div class="allprolist item">
      <div class="title">
        <div class="item-title">All product</div>
      </div>
      <div class="infolist">
        <a-carousel class="swiper" arrows autoplay>
          <template #prevArrow>
            <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
              <left-circle-outlined />
            </div>
          </template>
          <template #nextArrow>
            <div class="custom-slick-arrow" style="right: 10px">
              <right-circle-outlined />
            </div>
          </template>
          <div
            class="swiper-item"
            v-for="item in bannersData"
            :key="item.id"
            @click.stop="gotoDetail(item.id)"
            style="cursor: pointer;"
          >
            <img :src="item.url" />
          </div>
        </a-carousel>
        <a-tabs
          default-active-key="1"
          tab-position="top"
          @prevClick="callback"
          @nextClick="callback"
          @tabClick="tabClick"
        >
          <a-tab-pane key="All" tab="All">
            <div class="produclist">
              <kolProitem :prolist="productlist" type="product" @addSuccess="addSuccess"></kolProitem>
            </div>
          </a-tab-pane>
          <a-tab-pane v-for="item in proNavlist" :key="item.id" :tab="item.name">
            <div class="produclist">
              <kolProitem :prolist="productlist" type="product" @addSuccess="addSuccess"></kolProitem>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <div class="item myprolist">
      <div class="title flex-sp-c">
        <div class="item-title">My product</div>
        <a-radio-group v-model:value="type" @change="changeType">
          <a-radio-button value="Offline">Offline</a-radio-button>
          <a-radio-button value="Online">Online</a-radio-button>
          <a-radio-button value="all">All</a-radio-button>
        </a-radio-group>
      </div>
      <div class="lst">
        <div class="top flex-sp-c">
          <div class="left flex">
            <a-select
              ref="select"
              v-model:value="chosetag"
              style="width: 120px"
              @change="handletagChange"
            >
              <a-select-option value="All">All</a-select-option>
              <a-select-option
                v-for="(item,index) in tagsArr"
                :key="index"
                :value="item.id"
              >{{ item.tagName }}</a-select-option>
            </a-select>
            <div class="linkbtn" @click.stop="newTagvis = !newTagvis">Add new tag</div>
          </div>
          <div class="right">
            <div
              class="select kol-btn kol-btn-primary"
              v-if="!chosestatus && type !== 'all'"
              @click.stop="chosestatus = !chosestatus"
            >Select to {{ type === 'Offline' ? 'release' : 'remove' }}</div>
            <div class="flex-sp-c navwrap" v-if="chosestatus && type !== 'all'">
              <div class="linkbtn" @click.stop="selectAll">Select all</div>
              <div class="linkbtn" @click.stop="cancel">Cancel</div>
              <div
                class="kol-btn kol-btn-primary selectbtn release"
                :class="[haschosestatus ? 'delete' : '']"
                @click.stop="release"
              >{{ type === 'Offline' ? 'Release' : 'Close sale' }}</div>
              <div
                class="kol-btn kol-btn-primary selectbtn"
                :class="[haschosestatus ? 'delete' : '']"
                @click.stop="deleteItemvis = !deleteItemvis"
              >Delete</div>
            </div>
          </div>
        </div>
        <div class="mystorelst">
          <kolProitem
            :prolist="mystorelst"
            ref="kolproitem"
            type="myproduct"
            :canchose="chosestatus"
            :tagsArr="tagsArr"
            @changechosedstatus="changechosedstatus"
          ></kolProitem>
        </div>
      </div>
    </div>

    <!-- addnewtag -->
    <a-modal class="addnewtag" v-model:visible="newTagvis" title="add a new tag">
      <template #footer>
        <a-button key="submit" type="primary" @click="addAnewtag">Confirm</a-button>
      </template>
      <a-input v-model:value="newTag" placeholder="Add a new tag" />
    </a-modal>

    <!-- del -->
    <a-modal class="delmodal" v-model:visible="deleteItemvis">
      <template #footer>
        <a-button key="submit" type="primary" @click="delConfirm">Confirm</a-button>
      </template>
      <div class="attention">
        <img src="@/assets/product/attention.png" />
      </div>
      <div class="desc">Confirm deleting this product</div>
    </a-modal>
  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, onBeforeUnmount, watchEffect, toRaw, createVNode } from 'vue'
interface DataProps { }
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import kolProitem from '@/components/KolProItem/index.vue'
import { addAstoretag, canIchoose, delProductitems, getAllstoretags, getNavlist, getProductlistnav, getProductnavList, getProlstbystore, underProduct, undersomeBystore, upProduct, upsomeBystore } from '../../api/product';
import { IBanneritem, IProductitem, IPronavlist, ITag } from '../types';
import { getMainBanners } from '../../api/home';
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { Modal } from 'ant-design-vue';
import { useRouter } from 'vue-router';

const proNavlist = ref<IPronavlist[]>([])
// 初始化产品类别列表
const initProtype = async () => {
  const res = await getProductlistnav()
  console.log(res)
  if (res) {
    proNavlist.value = res.result
  }
}

const deleteItemvis = ref(false)
const delConfirm = async () => {
  const res = await delProduct()
  deleteItemvis.value = !deleteItemvis.value
  const state = type.value === 'all' ? '' : type.value === 'Online' ? 1 : 0
  initMystorelst(state)
}

const router = useRouter()
// 轮播图去详情
const gotoDetail = (id: any) => {
  router.push(`/product/detail?id=${id}`)
}

onMounted(() => {
  initProtype()
  getBanners()
  getProlist(1)
})

const bannersData = ref<IBanneritem[]>([])    // banners数据
// 初始化轮播图数据
const getBanners = async () => {
  const res = await getMainBanners()
  console.log(res)
  if (res) {
    bannersData.value = res.result
  }
}

const haschosestatus = ref(false)
const changechosedstatus = (res: boolean) => {
  console.log(res, 'res')
  haschosestatus.value = res
}

// 可选择商品列表数据
const productlist = ref<IProductitem[]>([])
const nowPage = ref(1)
const totalPage = ref(1)
const getProlist = async (id: any) => {
  id = id === 'All' ? '' : id
  const res = await canIchoose(id, nowPage.value)
  if (res) {
    productlist.value = [...productlist.value, ...res.result.records]
    totalPage.value = res.result.pages
  }
}

const nowKey = ref('1')
const callback = (key: any) => {
  console.log(key)
}
const tabClick = (key: any) => {
  nowPage.value = 1
  nowKey.value = key
  console.log(key)
  productlist.value = []
  getProlist(key)
}

const addSuccess = () => {
  const state = type.value === 'all' ? '' : type.value === 'Online' ? 1 : 0
  initMystorelst(state)
}

// 上拉加载
const scrollNum = ref(0)
const handleScroll = (e: any) => {
  //变量scrollTop是滚动条滚动时，距离顶部的距离
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  //变量windowHeight是可视区的高度
  var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  //变量scrollHeight是滚动条的总高度
  var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  //滚动条到底部的条件
  if (scrollHeight - scrollTop - windowHeight < 200) {
    //到了这个就可以进行业务逻辑加载后台数据了
    console.log(nowPage.value, totalPage.value)
    if (nowPage.value < totalPage.value) {
      console.log(nowPage.value, totalPage.value)
      nowPage.value = nowPage.value + 1
      getProlist(nowKey.value)
    } else {
      // message.error('到底了，没有数据了')
    }
  }
}
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})
onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
})


const changeType = (e: any) => {
  type.value = e.target.value
  chosetag.value = 'All'
  const state = e.target.value === 'all' ? '' : e.target.value === 'Online' ? 1 : 0
  initMystorelst(state)
  chosestatus.value = false
}
const type = ref('Offline')
const chosetag = ref('All')
// 标签相关
const handletagChange = (val: string) => {
  const selectTag = val === 'All' ? '' : val
  const state = type.value === 'All' ? '' : type.value === 'Online' ? 1 : 0
  initMystorelst(state, selectTag)
}
const mystorelst = ref<IProductitem[]>([])
const initMystorelst = async (state?: any, tagid?: string) => {
  let param = {
    state: state,
    goodsStatus: 'UPPER',
    tagId: tagid || '',
    pageSize: 1000
  }
  const res = await getProlstbystore(param)
  if (res) {
    mystorelst.value = res.result.records
  }
}
onMounted(() => {
  initMystorelst(0)
  initTaglst()
})

const tagsArr = ref<ITag[]>([])
const initTaglst = async () => {
  const res = await getAllstoretags()
  console.log(res)
  if (res) {
    tagsArr.value = res.result
  }
}


const newTag = ref('')
const newTagvis = ref(false)
const addAnewtag = async () => {
  if (newTag.value) {
    await addAstoretag(newTag.value)
    message.success('添加成功')
    newTag.value = ''
    newTagvis.value = !newTagvis.value
    initTaglst()
  }
}


// online和offline的选择操作
const chosestatus = ref(false)   // 点击select to 按钮之后该值变为true 商品变为可选择状态
const canChoose = ref(false)          // 商品的可选择状态
const chosedPro = ref<string[]>([])    // 已经选择的商品
const kolproitem = ref()

const release = async () => {
  console.log(kolproitem.value.nowchosedarr)
  if (type.value === 'Offline') {
    // 下架状态 需要上架
    const res = await upsomeBystore(kolproitem.value.nowchosedarr)
    console.log(res)
    if (res) {
      message.success(res.message)
      cancel()
      initMystorelst(0)
    }
  } else {
    const res = await undersomeBystore(kolproitem.value.nowchosedarr)
    console.log(res)
    if (res) {
      message.success(res.message)
      cancel()
      initMystorelst(1)
    }
  }
}

const delProduct = async () => {
  const res = await delProductitems(kolproitem.value.nowchosedarr)
  console.log(res)
}

const selectAll = () => {
  kolproitem.value.selectallPro()
}

const cancel = () => {
  kolproitem.value.resetStatus()
  chosestatus.value = false
}


</script>
<style lang='scss'>
.delmodal {
  .attention {
    text-align: center;
    img {
      width: 56px;
      height: 56px;
    }
  }
  .desc {
    text-align: center;
    margin-top: 20px;
  }
}
.pro_wrap {
  width: 100%;
  min-height: 80vh;
  padding: 20px 160px;
  display: flex;
  justify-content: space-between;
  .ant-tabs-bar {
    border: none;
    margin: 0 0 35px 0;
    .ant-tabs-nav .ant-tabs-tab:hover,
    .ant-tabs-nav .ant-tabs-tab-active {
      color: #e60044;
    }
    .ant-tabs-ink-bar {
      background-color: #e60044;
    }
  }
  .swiper {
    width: 100%;
    margin-bottom: 40px;
    .swiper-item {
      height: 238px;
      img {
        width: 717px;
        height: 238px;
      }
    }
  }
  .item {
    width: 789px;
    background-color: #fff;
    border-top: 3px solid #e60044;
    .title {
      height: 89px;
      line-height: 89px;
      border-bottom: 1px solid #e0e0e0;
      width: 100%;
      padding: 0 37px;
      .item-title {
        font-size: 20px;
        font-family: Galvji;
        font-weight: bold;
        color: #000000;
      }
    }
    .infolist {
      width: 100%;
      padding: 30px 36px 83px;
      .pro-navlist {
        width: 100%;
        height: 62px;
        line-height: 62px;
        display: flex;
        overflow-x: scroll;
        .pro_navitem {
          font-size: 20px;
          font-family: Galvji;
          font-weight: bold;
          color: #000000;
          margin-right: 58px;
        }
        .pro_navitem.active {
          color: #e60044;
          position: relative;
          .bd {
            width: 40px;
            height: 6px;
            background-color: #e60044;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
  }
  .ant-radio-button-wrapper:first-child {
    border-radius: 100px 0 0 100px;
  }
  .ant-radio-button-wrapper:last-child {
    border-radius: 0 100px 100px 0;
  }
  .ant-radio-button-wrapper-checked {
    background: rgba(230, 0, 68, 0.1);
    border: 1px solid #e60044;
    color: #e60044;
  }
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
    background: rgba(230, 0, 68, 0.1);
  }
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child {
    border: 1px solid #e60044;
  }
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
    background: rgba(230, 0, 68, 0.1);
    border: 1px solid #e60044;
    color: rgba(230, 0, 68, 1);
  }
  .ant-radio-button-wrapper:hover {
    color: rgba(0, 0, 0, 1);
  }
  .myprolist {
    display: flex;
    flex-direction: column;
    .lst {
      flex: 1;
      padding: 35px 37px;
      .ant-select {
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        margin-right: 40px;
        .ant-select-selector {
          height: 40px;
          line-height: 40px;
          border: 1px solid #e0e0e0;
          border-radius: 20px;
          .ant-select-selection-item {
            height: 40px;
            line-height: 40px;
          }
          .ant-select-selection-overflow-item {
            height: 40px;
            line-height: 40px;
          }
        }
      }
      .linkbtn {
        font-size: 14px;
        font-family: Galvji;
        font-weight: 400;
        text-decoration: underline;
        color: #e60044;
        cursor: pointer;
      }
      .select {
        width: 160px;
        height: 40px;
        background: #e60044;
        border-radius: 20px;
        font-size: 14px;
        font-family: Galvji;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        float: right;
      }
      .mystorelst {
        padding-top: 27px;
      }
      .top {
        display: flex;
        justify-content: space-around;
      }
      .right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
      .selectbtn {
        width: 100px;
        height: 40px;
        background: #757575;
        border-radius: 20px;
        font-size: 14px;
        font-family: Galvji;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: not-allowed;
      }
      .delete {
        background: #e60044;
        border: none;
        cursor: pointer;
      }
      .mystorelst {
        .selecttags {
          .ant-select {
            .ant-select-selector {
              border-radius: 0;
            }
          }
        }
      }
    }
  }
}
.navwrap {
  width: 378px;
}
.addnewtag {
  width: 400px;
}
.ant-modal-content {
  width: 553px;
  display: flex;
  flex-direction: column;
  .ant-modal-header {
    height: 56px;
    padding: 42px 51px 0;
    border: none;
    .ant-modal-title {
      font-size: 18px;
      font-family: Galvji;
      font-weight: bold;
    }
  }
  .ant-modal-body {
    flex: 1;
    padding: 39px 50px 40px 50px;
    input {
      width: 453px;
      height: 48px;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
    }
    .email {
      font-size: 16px;
      font-family: Galvji;
      font-weight: bold;
      color: #000000;
      line-height: 48px;
    }
    .ant-input-group-wrapper {
      margin-bottom: 15px;
      input {
        width: 376px;
        height: 48px;
        border-right: none;
      }
      .ant-input-wrapper {
        height: 48px !important;
      }
      .ant-input-group-addon {
        width: 90px;
        background-color: #fff !important;
        color: rgba(0, 0, 0, 1) !important;
      }
    }
  }
  .ant-modal-footer {
    height: 88px;
    border: none;
    text-align: center;
    .ant-btn {
      width: 350px;
      height: 48px;
      background: #000000;
      border-radius: 24px;
    }
  }
}
</style>